<template>
  <qf-table
    :columns="columns"
    :tableData="tableData"
    :tableLoading="tableLoading"
  >
    <!-- 产品图片 -->
    <template v-slot:orderDetail[0].imageUrl="{ row }">
      <img :src="row.orderDetail[0].imageUrl" width="80" height="25" />
    </template>
    <!-- 操作按钮 -->
    <template v-slot:action="{ row }">
      <el-button size="small" type="primary" :disabled="row.order_status === 4">
        去支付
      </el-button>
      <el-button size="small" type="danger">删除</el-button>
    </template>
    <!-- 支付状态 -->
    <template v-slot:pay_status="{ row }">
      {{ row.pay_status === 0 ? "未支付" : "已支付" }}
    </template>
    <!-- 订单状态 -->
    <template v-slot:order_status="{ row }">
      {{ orderStatus(row) }}
    </template>
  </qf-table>
</template>
<script setup>
import qfTable from "@/components/qfTable/index.vue";
import * as api from "@/api/pay";
import { ref, onMounted } from "vue";
//定义表格的列
let columns = ref([
  {
    label: "产品图片",
    prop: "orderDetail[0].imageUrl",
    width: "130px",
  },
  {
    label: "产品编号",
    prop: "order_id",
  },
  {
    label: "产品名称",
    prop: "orderDetail[0].productName",
    width: "100px",
  },

  {
    label: "数量",
    prop: "orderDetail[0].quantity",
    width: "70px",
  },
  {
    label: "总价格",
    prop: "total_fee",
    width: "70px",
  },
  {
    label: "创建时间",
    prop: "create_time",
  },
  {
    label: "支付状态",
    prop: "pay_status",
    width: "90px",
  },
  {
    label: "订单状态",
    prop: "order_status",
    width: "90px",
  },
  {
    label: "操作",
    prop: "action",
    width: "150px",
  },
]);
//定义数据
let tableData = ref([]);
//声明控制加载动画的变量
let tableLoading = ref(false);
//请求数据
let getList = async () => {
  tableLoading.value = true;
  try {
    let res = await api.getOrderApi();
    // console.log(res);
    tableData.value = res.data.data;
    tableLoading.value = false;
  } catch (e) {
    console.log(e);
    tableLoading.value = false;
  }
};
//订单状态
//订单状态：0未提交 1提交成功 2已经取消 3 无效订单 4交易关闭 5退货
let orderStatus = (row) => {
  switch (row.order_status) {
    case 0:
      return "未提交";
    case 1:
      return "提交成功";
    case 2:
      return "已经取消 ";
    case 3:
      return "无效订单";
    case 4:
      return "交易关闭";
    case 5:
      return "退货";
  }
};

onMounted(() => {
  getList();
});
</script>
<script>
export default {
  meta: {
    title: "order",
    name: "订单管理",
    routeName: "order",
    icon: "icon-dd",
  },
};
</script>
<style scoped>
.el-table {
  margin-top: 30px;
}
</style>
